<template>
  <el-menu-item index="2" @click="handleChangeReport"><span class="iconfont icon-baogao">&nbsp;</span>报告路况</el-menu-item>
  <el-menu-item index="3" @click="handleAnnouncementBoard"><span class="iconfont icon-gonggao">&nbsp;</span>查看公告</el-menu-item>
  <ReportTraffic v-if="isShowReport"></ReportTraffic>
  <!-- 公告列表的弹窗 -->
  <AnnouncementBoard></AnnouncementBoard>
</template>

<script setup>
import ReportTraffic from '@/components/ReportTraffic.vue'
import AnnouncementBoard from './AnnouncementBoard.vue'

import { useAnnouncementHook } from '../Hooks/useAnnouncementHook.js'
import { claerMap } from '@/hook/MapClear.js'
import { storeToRefs } from 'pinia'
import { useCommonStore } from '@/stores/common'
import { watch,getCurrentInstance } from 'vue'

const store = useCommonStore()
const { queryflag, InputFlag, isShowVideo, changeEventFlag, addEventFlag, isShowInfo,isShowReport } = storeToRefs(store)
const { handleAnnouncementBoard } =
  useAnnouncementHook()

  const props = defineProps({
    activeIndex: {
        type: String,
        default: ''
    }
})
const handleChangeReport = () => {
  isShowReport.value = !isShowReport.value
}
const {proxy} = getCurrentInstance()
watch(() => props.activeIndex, (newVal, oldVal) => {
    if (newVal.length == 1 && newVal.split('-')[0] !== oldVal.split('-')[0]) {
        claerMap(proxy.$map)
    }
    if (newVal !== "6") {
        changeEventFlag.value = false
    }
    if (newVal !== "5") {
        addEventFlag.value = false
    }
    if (newVal !== "4") {
        isShowVideo.value = false
    }
})
</script>

<style scoped></style>
